<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格插件</title>
    <base href="/">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="js/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="css/plugins/iCheck/custom.css"  media="all">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
</head>
<body>

        <div id="toolbar">
            <button id="button1" class="btn btn-default">返回表格的 Options。</button>
            <button id="button2" class="btn btn-default">返回所选的行，当没有选择任何行的时候返回一个空数组。</button>
            <button id="button3" class="btn btn-default">返回所有选择的行，包括搜索过滤前的，当没有选择任何行的时候返回一个空数组。</button>
            <button id="button4" class="btn btn-default">或者当前加载的数据。假如设置 useCurrentPage 为 true，则返回当前页的数据。</button>
            <button id="button5" class="btn btn-default">根据 uniqueId 获取行数据。</button>
            <button id="button6" class="btn btn-default">加载数据到表格中，旧数据会被替换。</button>
            <button id="button7" class="btn btn-default">添加数据到表格在现有数据之后。。</button>
            <button id="button8" class="btn btn-default">插入数据到表格在现有数据之前。。</button>
            <button id="button9" class="btn btn-default">从表格中删除数据，包括两个参数： field: 需要删除的行的 field 名称。values: 需要删除的行的值，类型为数组。</button>
            <button id="button10" class="btn btn-default">删除表格所有数据。</button>
            <button id="button11" class="btn btn-default">根据 uniqueId 删除指定的行。</button>
            <button id="button12" class="btn btn-default">插入新行，参数包括：index: 要插入的行的 index。row: 行的数据，Object 对象。 </button>
            <button id="button13" class="btn btn-default"> 	更新指定的行，参数包括：index: 要更新的行的 index。row: 行的数据，Object 对象。 </button>
            <button id="button14" class="btn btn-default">显示指定的行，参数包括：index: 要更新的行的 index 或者 uniqueId。isIdField: 指定 index 是否为 uniqueid。</button>
            <button id="button15" class="btn btn-default">隐藏指定的行，参数包括：index: 要更新的行的 index。或者 uniqueId。isIdField: 指定 index 是否为 uniqueid。</button>
            <button id="button16" class="btn btn-default">获取隐藏的列</button>
            <button id="button17" class="btn btn-default">获取可见的列</button>
            <button id="button18" class="btn btn-default">滚动到指定位置，单位为 px，设置 'bottom' 表示跳到最后。(查看按钮7代码)</button>
            <button id="button19" class="btn btn-default">获取当前滚动条的位置，单位为 px。</button>
            <button id="button20" class="btn btn-default">跳到指定的页</button>
            <button id="button21" class="btn btn-default">跳到上一页。</button>
            <button id="button22" class="btn btn-default">跳到下一页。</button>
            <button id="button23" class="btn btn-default">切换分页选项。</button>
            <button id="button24" class="btn btn-default">切换 card/table 视图</button>
<!--             <button id="button25" class="btn btn-default">中文</button>
            <button id="button26" class="btn btn-default">英文</button> -->
        </div>
<table id="table" data-toggle="table" title='初始化表格'
data-toolbar="#toolbar"       title='设置工具条容器'
data-click-to-select="true"   title='开启数据点击联动复选'
data-unique-id="id"           title='可以根据这个字段的值获取行数据'
data-height="1000"             title='定义表格的高度'
data-undefined-text="-"       title='当数据为 undefined 时显示的字符'
data-striped="true"           title='设置为 true 会有隔行变色效果'
data-method="post"            title="服务器数据的请求方式 'get' or 'post' "
data-url="/g/t"                   title="服务器数据的加载地址"
data-cache="true"             title="设置为 false 禁用 AJAX 数据缓存"
data-content-type="application/json" title="发送到服务器的数据编码类型"
data-data-type="json"         title="服务器返回的数据类型"
data-query-params=""          title="请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含limit, offset, search, sort, order 否则, 需要包含:pageSize, pageNumber, searchText, sortName, sortOrder.返回false将会终止请求"
data-query-params-type="limit" title="设置为 'limit' 则会发送符合 RESTFul 格式的参数."
data-response-handler="function(res) {return res;}" title="加载服务器数据之前的处理程序，可以用来格式化数据。参数：res为从服务器请求到的数据。"
data-pagination="true"        title="设置为 true 会在表格底部显示分页条"
data-pagination-loop="true"   title="设置为 true 启用分页条无限循环的功能"
data-only-info-pagination="false" title="设置为 true 只显示总数据数，而不显示分页按钮。需要 pagination='True'"
data-side-pagination="server"       title="设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法"
data-page-number="1"             title="如果设置了分页，首页页码"
data-page-size="1"              title="如果设置了分页，页面数据条数"
data-page-list="[10, 25, 50, 100, All]"title="如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。"
data-select-item-name="btSelectItem" title="radio or checkbox 的字段名"
data-escape="false"                 title="转义HTML字符串，替换 &, <, >, , `, 和 ' 字符."
data-search="true"                 title="是否启用搜索框"
data-search-on-enter-key="false"  title="设置为 true时，按回车触发搜索方法，否则自动触发搜索方法"
data-strict-search="false"             title="设置为 true启用 全匹配搜索，否则为模糊搜索"
data-search-text="初始化搜索文字"         title="初始化搜索文字"
data-search-time-out="500"   title="设置搜索超时时间"
data-trim-on-search="true"   title="设置为 true 将允许空字符搜索"
data-show-header="true"      title="是否显示列头"
data-show-footer="true"      title="是否显示列脚"
data-show-columns="true"      title="是否显示 内容列下拉框"
data-show-columns="true"      title="是否显示 内容列下拉框"
data-show-refresh="true"      title="是否显示刷新按钮"
data-show-toggle="true"       title="是否显示切换视图按钮" 
data-show-pagination-switch="true" title="是否显示 数据条数选择框"
data-minimum-count-columns="1" title="当列数小于此值时，将隐藏内容列下拉框。 "
data-id-field="id"             title="指定主键列"
data-card-view="false"         title="设置为 true将显示card视图，适用于移动设备。否则为table试图，适用于pc"
data-detail-view="true"        title="设置为 true 可以显示详细页面模式。"
data-detail-formatter="格式化详细页面模式的视图。"  title="格式化详细页面模式的视图。"
data-search-align="right"  title="指定 搜索框 水平方向的位置。'left' or 'right'。"
data-buttons-align="right"  title="指定 按钮 水平方向的位置。'left' or 'right''。"
data-toolbar-align="left"     title="指定 toolbar 水平方向的位置。'left' or 'righ"
data-pagination-v-align="bottom"     title="指定 分页条 在垂直方向的位置。'top' or 'bottom' or 'bonth'"
data-pagination-h-align="right" title="指定 分页条 在水平方向的位置。'left' or 'right'"
data-pagination-detail-h-align="left" title="指定 分页详细信息 在水平方向的位置。'left' or 'right'"
data-pagination-pre-text="上一页"title="指定分页条中上一页按钮的图标或文字"
data-pagination-next-text="下一页"title="指定分页条中下一页按钮的图标或文字"
data-single-select="false"title="设置True 将禁止多选"
data-click-to-select="false"title="设置true 将在点击行时，自动选择rediobox 和 checkbox"
data-checkbox-header="true" title="设置false 将在列头隐藏check-all checkbox .	"
data-maintain-selected="true" title="设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项 .	"
data-sortable="true" title="设置为false 将禁止所有列的排序"
data-silent-sort="true" title="设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效."
data-row-style="function(row,index) {return class;}" title="自定义行样式 参数为：row: 行数据index: 行下标返回值可以为class或者css "
data-row-attributes="function(row,index) {return attributes;}"title="自定义行属性"
data-sort-name="id" 
data-sort-order="desc" 
data-mobile-responsive="true"
>
    <thead>
        <tr>    <th data-field="state" data-checkbox="true"></th><!-- 多选，data-checkbox数据列加多选 -->
                <th data-field="id">ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
        <tr>
            <td></td>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
        </tr>
    </tbody>
</table>
<script src="http://laymi-assets.oss-cn-shanghai.aliyuncs.com/js/jquery-2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- 国际化(还有其他语言，这里举例) -->
<!-- <script src="http://laymi-assets.oss-cn-shanghai.aliyuncs.com/js/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js"></script> -->
<!-- <script src="http://laymi-assets.oss-cn-shanghai.aliyuncs.com/js/bootstrap-table-master/dist/locale/bootstrap-table-en-US.js"></script> -->
<script>
    var $table = $('#table'),
    $获取Options = $('#button1');
    $获取行 = $('#button2');
    $获取所有行 = $('#button3');
    $获取当前页数据 = $('#button4');
    $uniqueId获取行数据 = $('#button5');
    $加载数据到表格 = $('#button6');
    $追加数据 = $('#button7');
    $添加数据到前面 = $('#button8');
    $从表中删除数据 = $('#button9');
    $删除表中所有数据 = $('#button10');
    $根据uniqueId删除指定的行 = $('#button11');
    $插入一行 = $('#button12');
    $更新指定行 = $('#button13');
    $显示指定行 = $('#button14');
    $隐藏指定行 = $('#button15');
    $获取隐藏的列 = $('#button16');
    $获取可见的列 = $('#button17');
    $获取当前位置= $('#button19');
    $跳到指定的页= $('#button20');
    $跳到上一页= $('#button21');
    $跳到下一页= $('#button22');
    $切换分页选项= $('#button23');
    $切换cardtable视图= $('#button24');
    $中文= $('#button25');
    $英文= $('#button26');
    $(function () {
        $获取Options.click(function () {
        	 $table.bootstrapTable('getOptions');
        	 console.log($table.bootstrapTable('getOptions'));
        });
        $获取行.click(function () {
            alert('获取行: ' + JSON.stringify($table.bootstrapTable('getSelections')));
        });
        $获取所有行.click(function () {
            alert('获取所有行: ' + JSON.stringify($table.bootstrapTable('getAllSelections')));
        });
        $获取当前页数据.click(function () {
            alert(JSON.stringify($table.bootstrapTable('getData')));
        });
        $uniqueId获取行数据.click(function () {
            alert('getRowByUniqueId: ' + JSON.stringify($table.bootstrapTable('getRowByUniqueId', 1)));
        });
        $加载数据到表格.click(function () {
            $table.bootstrapTable('load', randomData());
        });
        $追加数据.click(function () {
            $table.bootstrapTable('append', randomData());//追加数据
            $table.bootstrapTable('scrollTo', 'bottom');//滚动到指定位置，单位为 px，设置 'bottom' 表示跳到最后。
        });
        $添加数据到前面.click(function () {
            $table.bootstrapTable('prepend', randomData());
        });
        $从表中删除数据.click(function () {
            var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id;
            });
            console.log(ids);
            $table.bootstrapTable('remove', {
                field: 'id',
                values: ids
            });
        });
        $删除表中所有数据.click(function () {
            $table.bootstrapTable('removeAll');
        });
        $根据uniqueId删除指定的行.click(function () {
            $table.bootstrapTable('removeByUniqueId', 1);
        });
        $插入一行.click(function () {
            var randomId = 100 + ~~(Math.random() * 100);
            $table.bootstrapTable('insertRow', {
                index: 1,
                row: {
                    id: randomId,
                    name: 'Item ' + randomId,
                    price: '$' + randomId
                }
            });
        });
        $更新指定行.click(function () {
            var randomId = 100 + ~~(Math.random() * 100);
            $table.bootstrapTable('updateRow', {
                index: 1,
                row: {
                    id: randomId,
                    name: 'Item ' + randomId,
                    price: '$' + randomId
                }
            });
        });
        $显示指定行.click(function () {
            $table.bootstrapTable('showRow', {index: 1});
        });

        $隐藏指定行.click(function () {
            $table.bootstrapTable('hideRow', {index: 1});
        })
        $获取隐藏的列.click(function () {
            alert('获取隐藏的列: ' + JSON.stringify($table.bootstrapTable('getHiddenColumns')));
        });
        $获取可见的列.click(function () {
        	alert('获取可见的列: ' + JSON.stringify($table.bootstrapTable('getVisibleColumns')));
        	console.log('获取可见的列: ' + JSON.stringify($table.bootstrapTable('getVisibleColumns')));
        });
        $获取当前位置.click(function () {
        	alert('获取当前位置: ' + JSON.stringify($table.bootstrapTable('getScrollPosition')));
        	console.log('获取当前位置: ' + JSON.stringify($table.bootstrapTable('getScrollPosition')));
        });
        $跳到指定的页.click(function () {
        	$table.bootstrapTable('selectPage', 2);
        });
        $跳到上一页.click(function () {
        	$table.bootstrapTable('prevPage');
        });
        $跳到下一页.click(function () {
        	$table.bootstrapTable('nextPage');
        });
        $切换分页选项.click(function () {
        	$table.bootstrapTable('togglePagination');
        });
        $切换cardtable视图.click(function () {
        	$table.bootstrapTable('toggleView');
        });
/*         $中文.click(function () {
        	$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
        });
        $英文.click(function () {
        	$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']);
        }); */
        //不会用，上面最后导入的哪个语言包就是哪个
/*       
*/
    });
    function randomData() {
        var startId = ~~(Math.random() * 100),
            rows = [];
        for (var i = 0; i < 10; i++) {
            rows.push({
            	state:'',
                id: startId+i,
                name: 'test' + (startId + i),
                price: '$' + (startId + i)
            });
        }
        return rows;
    }
</script>
</body>
</html>